/***************************
	Post detail
***************************/
.post {
  font-size  : emCal(16, 16);
  line-height: emCal(16, 23);

  .post-standard {
    &__content {
      position        : relative;
      color           : setColor(fontColor) !important;
      overflow-x      : hidden;
      overflow-y      : auto;
      margin-top      : emCal(16, 10);
      margin-bottom   : emCal(16, 10);
      // padding      : 0 emCal(16, 30) emCal(16, 30) emCal(16, 30) !important;


      .content_info {
        display      : flex;
        border-bottom: 1px solid setColor(border);
      }

      .iconfont {
        color: setColor(highlight) !important
      }

      .content_quote {
        background-color: setColor(blockquoteBg);
        color           : setColor(blockquoteColor);
        font-size       : emCal(16, 13), ;
        margin          : emCal(16, 18) 0;
        padding         : emCal(16, 25) emCal(16, 18);
      }

      .content-src {
        padding-top: 1em;
      }

      img {
        @include imgCenter;
        @include prefix(transition, $transition);

        &:hover {
          transform: scale(1.01);
        }
      }

      .content-image {
        margin-top   : 1em;
        overflow     : hidden;
        cursor       : pointer;
        border-radius: emCal(16, 3)
      }

      figure {
        figcaption {
          text-align: center;
          margin-top: emCal(16, 10);

          .image-title {
            margin-bottom: emCal(16, 8);

            span {
              border-bottom: 1px solid setColor(border);
              padding      : emCal(16, 7);
            }
          }
        }
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        position     : relative;
        margin-top   : emCal(16, 16);
        margin-bottom: emCal(16, 16);
        font-weight  : bold;
        line-height  : inherit;
        cursor       : text;
      }

      h1 {
        padding-bottom: .4rem;
        font-size     : 2rem;
        line-height   : 1.3;
      }

      h2 {
        font-size     : 1.7rem;
        line-height   : 1.225;
        margin        : 35px 0 15px;
        padding-bottom: 0.5em;
      }

      h3 {
        font-size  : 1.4rem;
        line-height: 1.43;
        margin     : 20px 0 7px;
      }

      h4 {
        font-size: 1.1rem;
      }

      h5 {
        font-size: 1rem;
      }

      h6 {
        font-size: 0.9rem;
      }

      hr {
        margin    : 20px 0;
        border    : 0;
        border-top: 1px solid setColor(border);
      }

      blockquote {
        border-left     : 5px solid setColor(highlightStyle);
        padding         : 1rem 0.8rem 1rem 0.8rem;
        background-color: setColor(blockquoteBg);
        color           : setColor(blockquoteColor);
        font-size       : emCal(16, 13), ;
        margin-top      : 1em;
        margin-bottom   : 1em;
      }

      pre {
        padding         : 1rem 1rem 1rem 1rem !important;
        border-radius   : 0.35rem;
        tab-size        : 4;
        overflow-x      : auto;
        line-height     : 0.2;
        color           : setColor(preColor);
        background-color: setColor(preBg);
        margin-top      : 1rem;
        margin-bottom   : 0.5rem;
      }

      p code,
      ul code,
      table code,
      blockquote code {
        color           : setColor(code);
        background-color: inherit;
      }

      code {
        padding: 1px 5px;
        top    : 13px !important;
        font-family: JetBrains Mono, Consolas, monospace, Microsoft YaHei, Inconsolata, Monaco, "Courier New", Courier,
          sans-serif !important;
        font-size    : 0.8rem;
        border-radius: 2px;
        line-height  : 1.3;
      }

      b,
      strong {
        font-weight: bold;
      }

      a {
        margin-right  : 0 !important;
        color         : setColor(highlightStyle);
        text-transform: none !important;
      }

      a:hover {
        font-weight    : bold;
        text-decoration: underline;
      }

      ol,
      ul {
        display     : block;
        padding-left: 2em !important;
        word-spacing: 0.05rem;
      }

      ul li,
      ol li {
        display  : list-item;
        font-size: inherit;
      }

      ul li {
        list-style-type: disc;
      }

      ul ul li {
        list-style-type: circle;
      }

      table {
        width          : 100%;
        display        : block;
        border-collapse: collapse;
        border-spacing : 0;
        overflow       : auto;
      }

      table tr:nth-child(2n),
      thead {
        background-color: setColor(trColor);
      }

      table th {
        background-color: setColor(thColor);
        min-width       : 80px;
        border          : 1px solid setColor(border);
        padding         : 6px 6px;
      }

      table td {
        min-width: 80px;
        border   : 1px solid setColor(border);
        padding  : 6px 6px;
      }


      @include mq(sm) {
        table {
          table-layout: fixed;
        }
      }

      sup {
        vertical-align: super;
        font-size     : 0.5em;
        color         : setColor(highlight);

        &::before {
          content: "[";
        }

        &::after {
          content  : "]";
          font-size: 0.5em;
        }
      }

      sub {
        vertical-align: sub;
        font-size     : 0.5em;
      }
    }
  }

  .about {
    &-content {
      padding: 3em !important;

      @include mq(sm) {
        padding: 0 !important;
      }
    }

    &-comment {
      .post-footer__comment {
        padding: 3em !important;

        @include mq(sm) {
          padding: 0 !important;
        }
      }
    }
  }
}

.post-footer {
  font-size    : 16px;
  margin-top   : emCal(16, 30);
  margin-bottom: 0;
  line-height  : 2;

  &__tags {
    a {
      &::after {
        content: ",";
      }

      &:last-child {
        &::after {
          content: "";
        }
      }
    }
  }

  &__related {
    margin-top   : emCal(16, 30);
    display      : flex;
    margin-bottom: emCal(16, 60);

    &__item {
      flex     : 1 1 50%;
      max-width: 50%;

      &:hover {
        &.-prev {
          a {
            i {
              margin-right   : emCal(16, 20);
              text-decoration: none !important;
            }
          }
        }

        &.-next {
          a {
            i {
              margin-left    : emCal(16, 20);
              text-decoration: none !important;
            }
          }
        }
      }

      a {
        margin-bottom                                           : emCal(16, 20);
        display                                                 : block;
        @include link(setColor(title), setColor(highlight), $fsz: emCal(16, 15), $up: true, $fw: 600);

        i {
          @include prefix(transition, $transition);
        }
      }

      &__content {
        display: flex;

        img {
          @include imgCenter(emCal(16, 70), emCal(16, 105));
        }

        .card__content-title {
          font-size: emCal(16, 18);
        }
      }

      &.-prev {
        a {
          i {
            margin-right   : emCal(16, 10);
            font-size      : emCal(16, 16);
            text-decoration: none !important;
          }
        }

        .post-footer__related__item__content {
          img {
            border-radius: 5px;
            margin-right : emCal(16, 23);
          }
        }
      }

      &.-next {
        a {
          text-align: right;

          i {
            margin-left    : emCal(16, 10);
            font-size      : emCal(16, 16);
            text-decoration: none !important;
          }
        }

        .post-footer__related__item__content {
          float: right;

          img {
            border-radius: 5px;
            margin-left  : emCal(16, 23);
          }
        }
      }
    }
  }

  &__comment {
    margin-bottom: 1em;

    .utterances {
      max-width: 100%
    }
  }
}